<template>
    <div class="bigBox" ref="imgDom" v-scroll="handleScroll">
        <div class="header">
            <a-space>
                <span class="item" v-for="(item, i) in types" :class="i == id ? 'active' : ''"
                    @click="clickType(item[0], i)">
                    {{ item[1] }}
                </span>
            </a-space>
            <b>
                <a-space>
                    <a-input-search type="number" style="width: 120px" size="small" v-model:value="startPage"
                        placeholder="起始页" enter-button @search="onSearch" />
                    <i>页数：{{ page }}</i>
                    <i>总页数：{{ totalPage }}</i>
                    <i> 总数：{{ total }}</i>
                </a-space>
            </b>
        </div>
        <wc-waterfall gap="10" cols="3" class="img">
            <photo-provider :default-backdrop-opacity="0.5">
                <div v-for="item in imgData" class="item" v-slide-in>
                    <photo-consumer style="width: 100%" :intro="item.title" :src="item.url">
                        <img v-lazy="item.url" alt="">
                    </photo-consumer>
                    <a-button type="primary" size="small" @click="setWallpaper(item.url)" class="btn">设为壁纸</a-button>
                </div>
            </photo-provider>
        </wc-waterfall>
    </div>
    <BackTop :dom="imgDom"></BackTop>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getImages } from '@/api/index'
import _ from 'lodash'
import { setLocalData } from '@/utils/tool'
import { message } from 'ant-design-vue'
const types = [
    ['', '全部'],
    ['animal', '动物'], ['beauty', '美女'],
    ['car', '汽车'], ['comic', '漫画'],
    ['food', '食物'], ['game', '游戏'],
    ['movie', '电影'], ['person', '人物'],
    ['phone', '手机'], ['scenery', '风景'],
]
const id = ref(0)
const imgData: any = ref([])
const imgDom: any = ref(null)
const page = ref(1)
const totalPage = ref(0)
const startPage = ref()
const size = ref(20)
const type = ref('')
const total = ref(0)
const getData = async () => {
    const obj = {
        page: page.value,
        size: size.value,
        type: type.value
    }
    try {
        const result = await getImages(obj)
        result.result.list.forEach((el: any) => {
            imgData.value.push(el)
        });
        total.value = result.result.total
        totalPage.value = Math.ceil(total.value / size.value)
    } catch (error) {
        console.log(error);
    }
}
const clickType = (imgType: string, i: number) => {
    id.value = i
    if (type.value != imgType) {
        type.value = imgType
        page.value = 1
        imgData.value = []
        getData()
    }
}
// 滚动事件处理函数  
const handleScroll = _.throttle(() => {
    page.value++
    getData()
}, 500)
const onSearch = () => {
    // 边界条件处理：确保 startPage 在合法范围内  
    startPage.value = Math.max(1, Math.min(startPage.value, totalPage.value));
    page.value = startPage.value;
    imgData.value = [];
    getData();
}
const setWallpaper = (url: string) => {
    setLocalData('LOGIN_IMG', `url(${url})`)
    message.success('设置成功！')
}
onMounted(() => {
    getData()
})

</script>
<script lang="ts">
export default {
    name: 'imagesNet',
}
</script>
<style scoped lang="scss">
.bigBox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px 10px;
    overflow-y: scroll;
    @include scroll-bar();

    .header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        position: sticky;
        top: 0;
        left: 0;
        background-color: var(--backColor);
        z-index: 10;

        .item {
            padding: 2px 5px;
            border-radius: 3px;
            background-color: rgba(128, 128, 128, 0.522);
            color: white;
            cursor: pointer;
        }

        .active {
            background-color: var(--themeColor);
        }
    }

    .img {
        position: relative;

        .item {
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 1px 1px 3px 0px var(--themeColor);

            img {
                width: 100%;
                cursor: pointer;
            }

            .btn {
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 5;
                display: none;
            }

            &:hover {
                .btn {
                    display: block;
                }
            }
        }
    }
}
</style>